$(function () {
    init();

    async function init() {
        renderDom();
        initDiv();
        bind()
        console.info('initDiv执行了。。。。')
    }

    function initDiv() {
       var lastTop =  localStorage.getItem('top')
       var lastLeft =  localStorage.getItem('left')
       var lastWidth =  localStorage.getItem('width')
       var lastHeight =  localStorage.getItem('height')
        console.info('lastTop',lastTop)
        var containerBox = document.getElementById('container')
        containerBox.style.top = lastTop + "px"
        containerBox.style.left = lastLeft + "px"
        containerBox.style.width = lastWidth + "px"
        containerBox.style.height = lastHeight + "px"

        //需要调整尺寸的div
        let c = document.getElementById('container')
        // body监听移动事件
        document.getElementsByTagName('body')[0].addEventListener('mousemove', move)
        // 鼠标按下事件
        c.addEventListener('mousedown', down)
        // 鼠标松开事件
        document.getElementsByTagName('body')[0].addEventListener('mouseup', up)

        // 是否开启尺寸修改
        let resizeable = false
        // 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置
        let clientX, clientY
        // div可修改的最小宽高
        let minW = 8, minH = 8
        // 鼠标按下时的位置，使用n、s、w、e表示
        let direc = ''

        // 鼠标松开时结束尺寸修改
        function up() {
            resizeable = false
        }

        // 鼠标按下时开启尺寸修改
        function down(e) {
            let d = getDirection(e)
            // 当位置为四个边和四个角时才开启尺寸修改
            if (d !== '') {
                resizeable = true
                direc = d
                clientX = e.clientX
                clientY = e.clientY
            }
        }

        // 鼠标移动事件
        function move(e) {
            let d = getDirection(e)
            let cursor
            if (d === '') cursor = 'default';
            else cursor = d + '-resize';
            // 修改鼠标显示效果
            c.style.cursor = cursor;
            // 当开启尺寸修改时，鼠标移动会修改div尺寸
            if (resizeable) {
                // 鼠标按下的位置在右边，修改宽度
                if (direc.indexOf('e') !== -1) {
                   let boxWidth =  Math.max(minW, c.offsetWidth + (e.clientX - clientX))
                    c.style.width = boxWidth + 'px'
                    localStorage.setItem('width',boxWidth)
                    clientX = e.clientX
                }

                // 鼠标按下的位置在上部，修改高度
                if (direc.indexOf('n') !== -1) {
                    let boxHeight = Math.max(minH, c.offsetHeight + (clientY - e.clientY))
                    c.style.height = boxHeight + 'px'
                    localStorage.setItem('height',boxHeight)
                    clientY = e.clientY
                }
                // 鼠标按下的位置在底部，修改高度
                if (direc.indexOf('s') !== -1) {
                    let boxHeight = Math.max(minH, c.offsetHeight + (e.clientY - clientY))
                    c.style.height = boxHeight + 'px'
                    localStorage.setItem('height',boxHeight)
                    clientY = e.clientY
                }

                // 鼠标按下的位置在左边，修改宽度
                if (direc.indexOf('w') !== -1) {
                    let boxWidth = Math.max(minW, c.offsetWidth + (clientX - e.clientX))
                    c.style.width = boxWidth + 'px'
                    localStorage.setItem('width',boxWidth)
                    clientX = e.clientX
                }

            }
        }

        // 获取鼠标所在div的位置
        function getDirection(ev) {
            let xP, yP, offset, dir;
            dir = '';

            xP = ev.offsetX;
            yP = ev.offsetY;
            offset = 10;

            if (yP < offset) dir += 'n';
            else if (yP > c.offsetHeight - offset) dir += 's';
            if (xP < offset) dir += 'w';
            else if (xP > c.offsetWidth - offset) dir += 'e';

            return dir;
        }

        var box = document.getElementById('container')
        var x, y; //鼠标相对与div左边，上边的偏移
        var isDrop = false; //移动状态的判断鼠标按下才能移动


        box.onmousedown = function (e) {
            var e = e || window.event; //要用event这个对象来获取鼠标的位置
            x = e.clientX - box.offsetLeft;
            y = e.clientY - box.offsetTop;
            isDrop = true; //设为true表示可以移动
        }
        var flag = false;

        var  timeEvent = 0
        document.onkeydown = function (keyEvent) {
            console.info(keyEvent.keyCode)
            timeEvent = setTimeout(()=>{
                flag = true;
            },500)
            if (keyEvent.keyCode == 18) {
                box.style.opacity = 0.1
            }
        }

        document.onkeyup = function (keyEvent) {
            flag = false;
            clearTimeout(timeEvent)
            box.style.opacity = 1.0
        }


        document.onmousemove = function (e) {
            //是否为可移动状态                　　　　　　　　　　　 　　　　　　　
            if (isDrop && flag) {
                var e = e || window.event;
                var moveX = e.clientX - x; //得到距离左边移动距离                    　　
                var moveY = e.clientY - y; //得到距离上边移动距离
                //可移动最大距离
                var maxX = document.documentElement.clientWidth - box.offsetWidth;
                var maxY = document.documentElement.clientHeight - box.offsetHeight;
                moveX = Math.min(maxX, Math.max(0, moveX));
                moveY = Math.min(maxY, Math.max(0, moveY));
                box.style.left = moveX + "px";
                box.style.top = moveY + "px";
                localStorage.setItem('left',moveX)
                localStorage.setItem('top',moveY)
            } else {
                return;
            }

        }

        document.onmouseup = function () {
            isDrop = false; //设置为false不可移动
        }
    }

    async function renderDom() {
        $('body').prepend(`<div id="container" style="display: none">
                                         <div class="my-item"></div>
                            </div>`)
        $('body').prepend(`<div id="start" class="srt-button">开启</div>`)
    }


    function bind() {
        $('#start').click(() => {
            console.info('click')
            if ($('#start')[0].innerText == '开启') {
                $('#start')[0].innerText = '关闭'
                document.getElementById('container').style.display = 'block'
            } else {
                $('#start')[0].innerText = '开启'
                document.getElementById('container').style.display = 'none'
            }

        })
    }


})
